class MySwiper {
    constructor(sel, obj) {
      this.box = document.querySelector(sel);

      let { autoplay = false } = obj;
      console.log(autoplay);
      let pageLis = this.box.querySelectorAll(".page li");
      let itemLis = this.box.querySelectorAll(".item li");
      let pagenum = 0;
      pageLis.forEach(function (li, i) {
        li.onclick = function () {
          console.log(li, i);
          li.style.backgroundColor = "white";
          pageLis[pagenum].style.backgroundColor = "red";
          animate(itemLis[pagenum], { opacity: 0 });
          animate(itemLis[i], { opacity: 1 });
          pagenum = i;
        };
      });
      let rightBtn = this.box.querySelector(".rightBtn");
      let leftBtn = this.box.querySelector(".leftBtn");
      rightBtn.onclick = function () {
        pageLis[pagenum].style.backgroundColor = "red";
        animate(itemLis[pagenum], { opacity: 0 });

        pagenum++;

        if (pagenum == 3) {
          pagenum = 0;
        }
        pageLis[pagenum].style.backgroundColor = "white";

        animate(itemLis[pagenum], { opacity: 1 });
      };
      leftBtn.onclick = function () {
        pageLis[pagenum].style.backgroundColor = "red";
        animate(itemLis[pagenum], { opacity: 0 });

        pagenum--;

        if (pagenum == -1) {
          pagenum = 2;
        }
        pageLis[pagenum].style.backgroundColor = "white";

        animate(itemLis[pagenum], { opacity: 1 });
      };

      if (autoplay) {
        this.autoplay();
      }
    }

    autoplay() {
      let timer = setInterval(() => {
       
      }, 2000);

      let box = document.querySelector(".box");
      box.onmouseenter = function () {
        clearInterval(timer);
      };
      box.onmouseleave = function () {
        timer = setInterval(() => {
        }, 2000);
      };
    }
  }

  new MySwiper(".box", {
    autoplay: true,
  });